<%--
  Created by IntelliJ IDEA.
  User: 28101
  Date: 2021/9/16
  Time: 14:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="jstl" %>
<html>
<head>
    <link href="/css/bootstrap-theme.css" rel="stylesheet">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/homeAppliance.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <title>homeApplianceIndex</title>
</head>
<body style="background-color: rgba(217,216,210,0.33)">

    <div class="tabdiv">

        <div style="float: left;width: 240px;height: 650px;margin-right: 10px">
            <ul>
                <jstl:forEach var="commodity" items="${commodityList }"  begin="0" end="10">

                    <jstl:forEach var="commodityImg" items="${commodity.commodityImgs }">
                        <jstl:if test="${commodityImg.isbigindex == 1}">
                            <li class="allli">
                                <a href="/CommodityServlet?method=getCommodityById&pid=${commodity.pid}">
                                    <img src="/imgs/${commodityImg.src}" width="100%" height="100%" /><br/>
                                </a>
                            </li>
                        </jstl:if>

                    </jstl:forEach>

                </jstl:forEach>
            </ul>
        </div>

        <div style="float: left;width: 1100px;height: 650px">
            <ul>
                <jstl:forEach var="commodity" items="${commodityList }"  begin="0" end="7">

                    <jstl:forEach var="commodityImg" items="${commodity.commodityImgs }">

                        <jstl:if test="${commodityImg.isindex == 1}">
                            <li class="allli">
                                <a href="/CommodityServlet?method=getCommodityById&pid=${commodity.pid}">
                                    <img src="/imgs/${commodityImg.src}" width="200px" height="200px" /><br/>
                                        ${commodity.commodityName } <p/>
                                    <jstl:forEach var="commodityVersion" items="${commodity.commodityVersion }">
                                        <jstl:if test="${commodityVersion.vdefault == 1}">
                                            <font color="red">最低 ${commodityVersion.oprice} 起</font><br/>
                                        </jstl:if>
                                    </jstl:forEach>
                                </a>
                            </li>
                        </jstl:if>
                    </jstl:forEach>

                </jstl:forEach>
            </ul>
        </div>

    </div>

    <script src="/js/bootstrap.min.js"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script>
        $("a").hover(function () {
            $(this).parent().addClass('animated pulse');
        });

        $("a").mouseleave(function () {
            $(this).parent().removeClass('pulse');
        });

    </script>
</body>
</html>
